import {Component} from 'react'
import { Switch,Route,Redirect,HashRouter } from "react-router-dom";
import { Suspense, lazy } from "react";
import "./home.less";

let User = lazy(()=>import("../user/user.jsx"));
let List = lazy(()=>import("../list/list.jsx"));
let Person = lazy(()=>import("../person/person.jsx"));
let Limit = lazy(()=>import("../limit/limit.jsx"));


class Home extends Component {
  constructor(props){
        super(props);
  }
  goFun(router){
    this.props.history.push(router)
}
  render () {
    return (

        <HashRouter>
          <div className="content">
            <div className="sider">
            <div className="list" onClick = {this.goFun.bind(this,"/index/vue/user")}>用户列表</div>
            <div className="list" onClick = {this.goFun.bind(this,"/index/vue/list")}>新闻资讯</div>
            <div className="list" onClick = {this.goFun.bind(this,"/index/vue/limit")}>权限管理</div>
            <div className="list" onClick = {this.goFun.bind(this,"/index/vue/person")}>个人中心</div>
          </div>
          <div className="main">
            <Suspense fallback={()=>(<div>loading</div>)}>
              <Switch>
                <Route exact path="/index/vue" render={()=>(<Redirect to="/index/vue/user" />)}></Route>
                <Route path="/index/vue/user" component={User}></Route>
                <Route path="/index/vue/list" component={List}></Route>
                <Route path="/index/vue/limit" component={Limit}></Route>
                <Route path="/index/vue/person" component={Person}></Route>
              </Switch>
            </Suspense>
          </div>
          </div>
          
        </HashRouter>
    )
  }
}

export default Home;
